*{
    margin:0;
    padding:0;
    box-sizing: border-box;

}
.wrap{
    min-width:1200px;
    max-width:1550px;
    margin:0 auto;
}
/*页面头部*/
.head{
    width:100%;
    height:135px;
}
/*会员中心那几个字的内容*/
.vipCenter{
    height:90px;
    width:80%;
    margin:0 auto;
    position: relative;
}
.vipCenter>h1{
    padding-left:120px;
    position: absolute;
    left: 0;
    top: 10px;
    color:red;
    display: inline-block;
    line-height: 80px;
}
.info{
    padding-right:120px;
    position: absolute;
    right: 0;
    top: 42px;
    color: #7b7b7b;
    display: inline-block;
}
.remind>strong>a{
    text-decoration: none;
    color:darkred;
}
.recharge{
    height:45px;
    width:100%;
    background-color: #cd0429;
}
.slogan{
    width:960px;
    margin:0 auto;
    text-align: center;
    color:white;
    line-height:45px;
}
.vipBody{
    padding: 30px 0 60px 0;
    margin: 0 auto 183px auto;
    border: 1px solid #E4E4E4;
    background-color:#ffffff;
    /*width:960px;*/
    width:80%;
}
.vipBody{
    margin-top: 20px;
    height: 530px;
}
.wing-area{
    overflow: hidden;
    width:100%;
}
.wing-main{
    float:left;
    width:100%;
}
/*主体部分的左边*/
.wing-leftSide{
    float:left;
    width:230px;
    border-right:1px solid gray;
}
.wing-left{

    position: relative;
}
/*上边的图标*/
.logo-vip{
    height:50px;
    margin-bottom:-40px;
}
.bigzuan{
    display: flex;
    flex-direction: column;
    text-align:center;
}
.bigzuan>strong{
    width:80px;
    height:25px;

}
.bigzuan>em{
    font-size:20px;
    color:#cd0429;
    font-weight: bold;
    font-style:normal；
}
/*音质*/
.tone{
    line-height: 24px;
    margin-top: 40px;
    padding: 16px 0 0 50px;
    color: #666666;
}
.tone>p{
    font-size: 14px;
    color: #5e6781;
    margin-bottom: 10px;
}
/*充值中心右边那部分*/
.wing-rightSide{
    margin:0;
    float:right;
    padding-left:28px;
    width:700px;
}
.wing-right{
    position:relative;
}
/*开通的账号*/
.dredge{
    width:680px;
    height:20px;
    border-bottom:1px dotted #B2B2B2;
    padding:20px 0;
    font-size:14px;
    display:block;
    position:relative;
}
.user-title{
    font-size: 14px;
    padding-bottom:20px;
    position:relative;
}
.user-title>span{
    font-weight:bold;
    width:85px;
    display:inline-block;
}
.loginname{
    position: relative;
}
.loginname>span:nth-child(1){
    font-size:12px;
}
.userName{
    font-weight:bolder;
    color:darkred;
}
/*开通类型*/
.type{
    width:680px;
    margin-top:10px;
    position:relative;
    margin-bottom:23px;
    height:40px;
}
.product-type,.product-time{
    font-weight:bold;
    font-size: 14px;
    width:85px;
    display:inline-block;
    float:left;
}
.open-time{
    width:520px;
    height:30px;
    line-height: 30px;
    float:left;
    color:grey;
    display:inline;
    background-color:#fff9f9;
    border:2px solid #cd0429;
}
.senior{
    float:left;
}
.month{
    color:#cd0429;
    float:right;
}
/*开通时长*/
.time-type{
    width:680px;
    height:80px;
    margin-bottom:20px;
}
.choose-type{
    width:580px;
    height:80px;
    display:flex;
    justify-content: space-between;
}
.choose-type>div{
    border:1px solid gray;
    padding:30px 20px;
}
/*开通时长的选择类型*/
.choose-type>div>p{
    color:darkgray;
}
.choose-type>div>p>span{
    color:#cd0429;
    font-size:20px;
}
.much{
    text-align: center;
    color:gray;
    width:20px;
}
/*应付金额*/
.pay,.date{
    width:680px;
    height:30px;
    margin-bottom:20px;
    display: flex;
}
.product-pay,.product-date{
    display: inline-block;
    font-weight:bold;
    font-size: 14px;
    width:85px;
}
.finally-money,.finally-date{
    display:inline-block;
}
.finally-money{
    font-size:20px;
    font-weight:bold;
    color:#cd0429;
}
/*支付方式*/
.payment{
    width:680px;
    position: relative;
    height:160px;
}
.pay-way{
    display: inline-block;
    font-weight:bold;
    font-size: 14px;
    width:85px;
}
.pay-math{
    width:580px;
    height:160px;
    display:inline-block;
    text-align: center;
}
.zhi-pay{
    display:inline-block;
    border:1px solid #cd0429;
    width:200px;
    height:50px;
    line-height: 50px;
}
.zhi-pay>a{
    text-decoration: none;
    color:dodgerblue ;
    display: inline-block;
}
/*解释*/
.explain{
    text-align: center;
    width:680px;
    height:30px;
    line-height: 30px;
}
.explain>p{
    margin-bottom:20px;
}
/* 页面下边的小黑窗口 */
.black{
    /*min-width:1000px;*/
    /*max-width:1340px;*/
    padding:0 120px;
    margin:0 auto;
    height:30px;
    background-color: #bdb7b7;
    /*background-color:#282828;*/
    color: rgb(102, 100, 100);
    font-size:14px;
    font-weight:400;
    border-bottom: 1px solid grey;
}
.logo{
    display:flex;
    flex-direction: row;
    line-height:30px;
}
.logo>li{
    cursor: pointer;
    list-style: none;
    padding:0 20px 0 10px;
}
.logo>li>a{
    text-decoration:none;
    display: inline-block;
    color:rgb(102, 100, 100);
}
.logo>li:hover a{
    color:honeydew;
}
.logo>li:hover{
    color:honeydew;
}
.logo>li:last-child{
    border-right:none;
}
.foot{
    max-width:1550px;
    padding:24px 120px;
    margin:0 auto;
    height:130px;
    background-color: #bfbdbd;
    color:#666;
    font-size:12px;
    font-weight:400;
    text-align: center ;
}
.foot p{
    line-height:25px;
}
.foot>p:hover{
    color:honeydew;
}
/*页面的滚动条*/
/* 滚动条有滑块的轨道部分 */
::-webkit-scrollbar-track-piece {
    background-color: rgba(0,0,0,.1);
    border-radius: 1px;
}
/* 整个滚动条 */
::-webkit-scrollbar {
    width: 4px;
}
/* 滚动条竖向滑块 */
::-webkit-scrollbar-thumb:vertical {
    background-color:grey;
    border-radius: 4px;
    cursor: pointer;
}
/* 滚动条竖向滑块hover */
::-webkit-scrollbar-thumb:vertical:hover {
    background-color: grey;
    border-radius: 4px;
    cursor: pointer;
}
/* 滚动条横向滑块 */
::-webkit-scrollbar-thumb:horizontal {
    background-color: grey;
    border-radius: 4px;
}
/* 滚动条横向滑块hover */
::-webkit-scrollbar-thumb:horizontal:hover {
    background-color: grey;
    border-radius: 4px;
}
/*同时有垂直和水平滚动条时交汇的部分 */
::-webkit-scrollbar-corner {
    display: block;    /* 修复交汇时出现的白块 */
}

